<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
      <h3>姓名{{student.name}}</h3>
      <!-- 
      1.Vue.set(vm._data.student,"sex","男")
      2.vm.$set(vm._data.student,"sex","男")
        vm.$set(vm.student,"sex","男")
      -->
      <h3 style="color: red" v-if="student.sex">性别{{student.sex}}</h3>
      <button @click="addSex">点我追加性别属性</button>
      <h3>真实年龄{{student.age.rAge}} 虚岁{{student.age.sAge}}</h3>

      <h3>爱好：</h3>
      <ul>
        <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
      </ul>

      <h3>朋友们：</h3>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">{{f.name}} {{f.age}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          name: "尚硅谷",
          address: "北京",
          student: {
            name: "Tom",
            age: {
              rAge: 40,
              sAge: 18,
            },
            // 直接赋值的方式不能让vue监测到更改，需要配合数组的七个修改方法：
            // 修改数组方法，push、pop、shift、unshift、splice、sort、reverse。
            //    为什么这样可以？因为vue对这7个方法进行了包裹，它有两个功能：1.修改数组 2.触发视图更新
            // filter不算，因为不影响原数组
            hobby: ["抽烟", "喝酒", "烫头"],
            friends: [
              {
                name: "jerry",
                age: 35,
              },
              {
                name: "tony",
                age: 36,
              },
            ],
          },
        },
        methods: {
          addSex() {
            // Vue.set(this.student, "sex", "男");
            this.$set(this.student, "sex", "男"); //vm.$set(vm._data.student,"sex","男") 或 vm.$set(vm.student,"sex","男")
            /*
              data:{对象1:{},对象2} 只能给对象1，对象2。。。追加属性，不能直接给data追加属性
              否则报错：Avoid adding reactive properties to a Vue instance or its root $data at runtime。。。
              也就是 => $set(target,key,val)  这里target不能是vue实例也不能是vue实例的根实例对象（data、_data）
            */
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
